<style type="text/css">
    .layui-table-body{overflow-x:auto;}
    .layui-table-cell{font-size:12px;}
</style>
<div class="layui-form hisi-search">
    <form action="{:url()}" method="get" id="hisi-table-search">
        <div class="layui-form-item">
            <label class="layui-form-label">会员</label>
            <div class="layui-input-inline">
                <select name="user_id" class="layui-input field-user_id" lay-verify="required" lay-search="">
                  <option value="">直接选择或搜索选择</option>
                  {$users|raw}
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-inline">
                <select name="status" class="layui-input field-status"  lay-search="">
                  <option value="">直接选择或搜索选择</option>
                  <option value="1">寄存</option>
                  <option value="2">领取</option>
                  <option value="3">部分领取</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">开始时间</label>
          <div class="layui-input-inline">
            <!-- <input type="text" class="layui-input field-start_end" id="test6" name="start_end" placeholder=" - "> -->
            <input type="text" class="layui-input field-start" id="start" name="start" placeholder="yyyy-MM-dd">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">结束时间</label>
          <div class="layui-input-inline">
            <input type="text" class="layui-input field-end" id="end" name="end" placeholder="yyyy-MM-dd">
          </div>
        </div>
        <div class="layui-form-item hisi-search-btn">

            <div class="layui-input-inline">
                <button type="submit" class="layui-btn layui-btn-normal layui-icon layui-icon-search">执行</button>
                <button type="button" class="layui-btn layui-btn-warm layui-icon layui-icon-download-circle export">导出</button>
                <!-- <button type="reset" class="layui-btn layui-btn-primary layui-icon layui-icon-delete">重置</button> -->
            </div>
        </div>
    </form>
</div>

<table id="dataTable"></table>

<script type="text/html" id="statusTpl">
    <input type="checkbox" name="status" value="{{ d.status }}" lay-skin="switch" lay-filter="switchStatus" lay-text="正常|关闭" {{ d.status == 1 ? 'checked' : '' }} data-href="{:url('status')}?id={{ d.id }}">
</script>
<script type="text/html" title="操作按钮模板" id="buttonTpl">
    {{# if(d.status != 2){  }}
    <a href="{:url('take')}?id={{ d.id }}" class="layui-btn layui-btn-xs hisi-iframe-pop " hisi-data="{width: '900px', height: '600px', title: '领取'}">领取</a>

    <a href="{:url('tuihuo')}?id={{ d.id }}" target="_blank" class="layui-btn layui-btn-xs hisi-iframe-pop" hisi-data="{width: '900px', height: '600px', title: '退货'}">退货</a>
      {{# } }}
    <a href="{:url('dayin')}?id={{ d.id }}" target="_blank" class="layui-btn layui-btn-xs">打印</a>
    <a href="{:url('look')}?id={{ d.id }}" class="layui-btn layui-btn-xs hisi-iframe-pop " hisi-data="{width: '900px', height: '600px', title: '记录'}">记录</a>
</script>
{include file="system@block/layui" /}
<script id="toolbar" type="text/html">
    <a href="{:url('add')}" class="layui-btn layui-btn-normal layui-btn-sm hisi-iframe-pop" hisi-data="{width: '900px', height: '600px', title: '添加'}">&nbsp;添加</a>
</script>
<script type="text/javascript">
    layui.use(['table','laydate','jquery','excel'], function() {
        var table = layui.table;
        var laydate = layui.laydate;
var $ = layui.jquery;
var excel = layui.excel;
$(document).on('click','.export',function(){
    var form = $('#hisi-table-search').serializeArray();
    var where = new Array();
    form.push({name:'type',value:2});
    $.ajax({
       url: '{:url()}',
       data:form,
       dataType: 'json',
       success: function(res) {
           // 假如返回的 res.data 是需要导出的列表数据
           console.log(res.data);// [{name: 'wang', age: 18, sex: '男'}, {name: 'layui', age: 3, sex: '女'}]
           // 1. 数组头部新增表头
           res.data.unshift({sn:'订单号',user_name: '会员', product_name:'产品',num:'数量',take_num:'已领取数量',price:'价格',address:'存放位置',warehouse:'寄存仓库',admin_name:'负责人',bak:'备注',createtime:'创建时间',status:'寄存状态'});
           // 2. 如果需要调整顺序，请执行梳理函数
           var data = excel.filterExportData(res.data, [
            'sn',
            'user_name',
            'product_name',
            'num',
            'take_num',
            'price',
            'address',
            'warehouse',
            'admin_name',
            'bak',
            'createtime',
            'status',
           ]);
           // 3. 执行导出函数，系统会弹出弹框
           excel.exportExcel({
               sheet1: data
           }, '会员产品购买记录.xlsx', 'xlsx');
       }
   });
})
        //日期范围
    laydate.render({
      elem: '#start'
    });
    laydate.render({
      elem: '#end'
    });

        table.render({
            elem: '#dataTable'
            ,url: '{:url()}' //数据接口
            ,page: true //开启分页
            ,skin: 'row'
            ,even: true
            ,limit: 20
            ,text: {
                none : '暂无相关数据'
            }
            ,toolbar: '#toolbar'
            ,defaultToolbar: ['filter']
            ,cols: [[ //表头
                {type:'checkbox'}
                ,{field: 'sn', title: '订单编号'}
                ,{field: 'user_name', title: '会员'}
                ,{field: 'product_name', title: '产品'}
                ,{field: 'num', title: '数量'}
                ,{field: 'price1', title: '单价'}
                ,{field: 'price', title: '价格'}
                ,{field: 'address', title: '存放位置'}
                ,{field: 'warehouse', title: '仓库'}
                ,{field: 'admin_name', title: '负责人'}
                ,{field: 'bak', title: '备注'}
                ,{field: 'createtime', title: '创建时间',sort:true}
                // ,{field: 'taketime_text', title: '领取时间'}
                ,{field: 'status', title: '寄存状态', width: 100, templet: function(d){
                    if(d.status == 1){
                        return '<span style="color:red">寄存</span>';
                    }else if(d.status == 2){
                        return '<span>领取</span>'
                    }else if(d.status == 3){
                        return '<span>部分领取</span>'
                    }

                }}
                ,{title: '操作', width: 120, templet: '#buttonTpl'}
            ]]
            ,done: function(){
                if (typeof(layui.global.addTableTool) !== 'undefined') {
                    layui.global.addTableTool();
                }
            }
        });


        // $(document).on('click', '.j-tr-take', function() {
        //     var that = $(this),
        //         href = !that.attr('data-href') ? that.attr('href') : that.attr('data-href');
        //     layer.confirm('确定领取么？', {title:false, closeBtn:0}, function(index){
        //         if (!href) {
        //             layer.msg('请设置data-href参数');
        //             return false;
        //         }
        //         $.get(href, function(res) {
        //             if (res.code == 0) {
        //                 layer.msg(res.msg);
        //             } else {
        //                 location.reload();
        //             }
        //         });
        //         layer.close(index);
        //     });
        //     return false;
        // });
    });
</script>
